<!--  -->
<template>
  <div>角色管理
   <ELTable ref="tableRef" v-bind="tableConfig">
   
        <template #buttons="{deleteAllHandle }">
        <el-button @click="add" type="primary" >添加</el-button>
        <!-- <el-button @click="deleteAllHandle()" type="danger">批量删除</el-button> -->
      </template>
        <template #operate="{ scope, deleteHandle }">
        <el-button @click="edit(scope.row)" type="primary" >修改</el-button>
        <el-button @click="deleteHandle(scope.row.id)" type="danger">删除</el-button>
      </template>
   </ELTable>
   <Add :editData="editData" @close="handleClose" v-if="dialogVisible"></Add>
  </div>
</template>

<script lang='ts' setup>
import Add from '../../components/role/Add.vue';
import ELTable,{TableType} from '../../components/ELTable.vue';
import { getList,del,deleteAll } from '../../service/role/role';
import { reactive,toRefs,ref,onMounted} from 'vue'
const dialogVisible = ref(false)
const tableRef=ref<any>()
const tableConfig:TableType={
     loadData:getList,
     delete:del,
     deleteAll,
     columns:[
        {
            prop:"id",
            label:"id"
        },
        {
            prop:"name",
            label:"name"
        },
        {
            prop:"operate",
            label:"操作",
            slot:true,
            attrs:{
                width:180
            }
        },
     ]
}
const editData=ref<any>();
const add=()=>{

    editData.value={id:0,name:""};
    dialogVisible.value=true;
}
const handleClose=(val:boolean | undefined)=>{
    dialogVisible.value=false;
    val && tableRef.value.getData();
}
const edit=(data:any)=>{
    
    editData.value=data;
    dialogVisible.value=true;
}


</script>
<style scoped>
</style>